<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<image src="/static/img/serach.png" mode=""></image>
			<input type="text" value="" placeholder="中文/简拼" v-model="clientname" @input="intFocus" />
		</view>
		<!-- 热门车站 -->
		<view class="hot">
			<view class="title">热门汽车站</view>
			<view class="popular" v-for="(item, index) in hot" :key="index">
				<view class="hot_station" @click="back" :data-name="item.stationName" :data-code="item.globalCode" :data-refund="item.isCanRefund">{{ item.stationName }}</view>
			</view>
		</view>
		<!-- 车站列表 -->
		<view class="citys" v-for="k in city" :key="k" v-if="list.length === 0">
			<view class="interval"></view>
			<view class="city">{{ k.city }}</view>
			<view
				@click="back"
				:data-name="item.stationName"
				:data-code="item.globalcode"
				:data-refund="item.isCanRefund"
				class="station"
				v-for="item in k.stationInfo"
				:key="item"
			>
				{{ item.stationName }}
			</view>
		</view>
		<!-- 搜索后返回数据 -->
		<view class="" v-if="list.length != ''" style="margin-top: 20upx;">
			<view @click="back" class="station" :data-name="item.stationName" :data-code="item.globalcode" :data-refund="item.isCanRefund" v-for="item in list" :key="item">
				{{ item.stationName }}
			</view>
		</view>
		<!-- 加载中 -->
		<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			hot: [],
			city: [],
			list: [],
			clientname: '',
			active: true
		};
	},
	mounted() {},
	components: {},
	onShow() {},
	onLoad() {
		this.getData();
		this.GetHotStationInfo();
	},
	methods: {
		getData() {
			uni.showNavigationBarLoading();
			const that = this;
			let dataReq = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			dataReq.sign = utils.utils.GetSign(dataReq);
			this.$http
				.request({
					url: '/BusInfo/GetStationInfo', //出发车站
					method: 'get',
					data: dataReq
				})
				.then(res => {
					this.active = false;
					if (res.data.result === false) {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								} else if (res.cancel) {
								}
							}
						});
					}
					this.city = res.data.stationInfos;
				})
				.catch(err => {
					console.log(err);
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({});
							} else if (res.cancel) {
							}
						}
					});
				});
		},
		// 热门车站
		GetHotStationInfo() {
			const that = this;
			let hot = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			hot.sign = utils.utils.GetSign(hot);
			this.$http
				.request({
					url: '/BusInfo/GetHotStationInfo',
					method: 'get',
					data: hot
				})
				.then(res => {
					this.hot = res.data.hotStations;
				})
				.catch(err => {
					console.log(err);
				});
		},
		back: function(e) {
			const date = {
				departStationCode: e.target.dataset.code,
				departStationName: e.target.dataset.name,
				isCanRefund: e.target.dataset.refund
			};
			value.value.statrStationCode = e.target.dataset.code;
			uni.setStorage({
				data: date,
				key: 'departStation',
				success() {
					uni.navigateBack({});
				}
			});
		},
		// 搜索功能
		intFocus(e) {
			var val = e.detail.value.toUpperCase();
			var depart = this.city;
			var cityRearch = [];
			if (val.length > 0) {
				for (var item in depart) {
					depart[item].show = true;
					for (var arr in depart[item].stationInfo) {
						if (depart[item].stationInfo[arr].stationName.indexOf(val) == 0 || depart[item].stationInfo[arr].pycode.indexOf(val) == 0) {
							depart[item].stationInfo[arr].show = true;
							cityRearch.push(depart[item].stationInfo[arr]);
						}
					}
				}
				this.list = cityRearch;
			}
		}
	}
};
</script>

<style scoped>
/* 搜索框 */
.search {
	width: 96%;
	margin: auto;
	height: 65upx;
	display: flex;
	margin-top: 10upx;
	padding-left: 10upx;
	border: 1px solid #cccccc;
}
.search image {
	width: 40upx;
	height: 40upx;
	margin-top: 12upx;
}
.search input {
	width: 100%;
	color: #c0c0c0;
	margin-top: 10upx;
	font-size: 28upx;
	margin-left: 5upx;
}
/* 热门城市 */
.hot {
	/* width: 100%; */
	margin-top: 20upx;
	background-color: #f8f8f8;
}
.title {
	font-size: 35upx;
	padding: 15upx 0 0 15upx;
}
.popular {
	display: flex;
	margin: 15upx 20upx;
	padding-bottom: 20upx;
}
.hot_station {
	height: 66upx;
	color: #ffffff;
	font-size: 35upx;
	padding: 0 15upx;
	line-height: 66upx;
	border-radius: 10upx;
	background-color: #01a1e9;
}
/* 城市列表 */
.city {
	font-size: 40upx;
	padding-left: 8upx;
	line-height: 100upx;
	border-bottom: 1px solid #d9d9d9;
}
.interval {
	width: 100%;
	height: 10upx;
	background-color: #f1f1f1;
}
.station {
	color: #555555;
	font-size: 32upx;
	line-height: 85upx;
	margin-left: 20upx;
	padding-left: 10upx;
	border-bottom: 1px solid #d9d9d9;
}
</style>
